<template>
  <div class="fans-item">
    <div>
      <van-row>
        <van-col span="5"><div @click="goautor"><img :src="Img" alt="Alternate Text" /></div></van-col>
        <van-col span="12"><div class="name"><div>{{fandetail.name}}</div><span>粉丝数：{{fandetail.fans_count}}</span></div></van-col>
        <van-col span="6"><van-button v-if="guanzhu" class="yiguanzhu" icon="success" type="primary" @click="addLikeAutor">已关注</van-button><van-button v-else icon="plus" type="primary" @click="addLikeAutor">未关注</van-button></van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'FansItem',
  components: {},
  props: {
    fandetail: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      Img: ''
    }
  },
  computed: {
    ...mapState(['autorInfo']),
    guanzhu () {
      if (this.autorInfo.length > 0) {
        return this.autorInfo.findIndex(val => val.name === this.fandetail.name) !== -1
      } else {
        return false
      }
    }
  },
  created () {
    var p = this.fandetail.photo
    this.Img = require('@/assets/touxiang/' + p)
  },
  methods: {
    goautor () {
      if (this.fandetail.name === this.$store.state.userInfo.name) {
        this.$router.push('/my')
      } else if (this.fandetail.name !== '未知用户') {
        this.$router.push(`/autor/${this.fandetail.name}`)
      } else {
        this.$router.push('/404')
      }
    },
    addLikeAutor () {
      if (this.fandetail.name === '未知用户') {
        this.$toast.fail('无法关注此用户')
      } else if (!this.guanzhu) {
        this.$toast.success('已关注')
        this.$store.commit('addLikeAutor', this.fandetail)
      } else {
        this.$toast.fail('已取消关注')
        this.$store.commit('removeLikeAutor', this.fandetail.name)
      }
      this.$emit('load')
    }
  }
}
</script>

<style scoped lang="less">
  .van-row {
      padding:20px 20px 0 30px;
      border-bottom:1px solid #d4d4d4;
    img{
           width:100%;
           border-radius:100%;
       }
  .name{
      margin-left: 20px;
      padding-top:20px;
      div{
             font-size:35px;
             color: #d75f95;
         }
  span {
    font-size: 25px;
  }
  }
  .van-button {
    margin-top:40px;
    height: 60px;
    background: #d75f95;
    border:0;
    font-size:25px;
  }
  .yiguanzhu {
    background-color: #b7b4b4 !important;
  }
  }
</style>
